<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="./src/css/footer.css">
    <link rel="stylesheet" type="text/css" href="./src/css/search.css">

    <title>Document</title>
</head>

<body>
    <nav>
        <div class="container flex align-center between">
            <div class="flex align-center">
                <img class="app-icon" src="./resource/images/app-icon.png" alt="">
                <ul class="page-nav flex">
                    <li>
                        <a href="./index.html">首页</a>
                    </li>
                    <li>
                        <a href="./subscribe.html">预约服务</a>
                    </li>
                    <li>
                        <a href="./banshi.html">办事服务</a>
                    </li>
                    <li>
                        <a href="./educaiton.html">教育服务</a>
                    </li>
                    <li>
                        <a href="./cxserve.html">查询服务</a>
                    </li>
                    <li style="background: #168cf1;">
                        <a href="./search.html">搜索</a>
                    </li>
                </ul>
            </div>

            <div class="nav-right flex align-center">
                <a href="http://www.bendibao.com/app/pc.html">
                    <img class="phone" src="./resource/images/phone.svg" alt="">
                </a>
                <div class="nav-gzh">公众号</div>
                <div class="nav-qr-code display">
                    <span>
                    </span>
                    <img src="http://imgbdb3.bendibao.com/weixinbdb/20169/5/201695202114686.jpg" alt="">
                </div>
                <div class="line"></div>
                <div>
                    <a style="color: #fff;" href="http://sz.bendibao.com/news/">本地宝首页</a>
                </div>
            </div>
        </div>
    </nav>

    <div class="search-box flex just-center box">
        <div class="search flex between align-center">
            <div class="local-city"><img src="./resource/images/subscribe/local.png" alt=""> 深圳 </div>
            <input type="text" id="keyword">

        </div>
        <div class="search-btn cursor"><img src="./resource/images/search.png" alt=""></div>
    </div>
    <!-- 城市选择 -->
    <div class="sel-city display">
        <div class="shadow"></div>
        <div class="dialog">
            <div class="dia-top flex">
                <div class="top-title">请先选择站点</div>
                <div class="close cursor">×</div>
            </div>
            <div class="choose province flex ">
                <div>省级:</div>
                <ul class=" flex">
                    <li class="choose-city">
                        深圳市
                    </li>
                </ul>
            </div>
            <div class="choose city flex ">
                <div>市级:</div>
                <ul class="flex">
                    <li>黄浦区</li>
                    <li>黄浦区</li>
                    <li>黄浦区</li>
                    <li>黄浦区</li>
                </ul>
            </div>

        </div>
    </div>
    <!-- /城市选择 -->
    <div class="hot-search flex  box">
        <p>热门搜搜:</p>
        <ul class="flex">
            <li>同行密接自查
            </li>
            <li>核酸检测</li>
            <li>居住证</li>
            <li>退休</li>
            <li>公积金</li>
        </ul>
    </div>

    <div class="tabbar">
        <ul class="tab-list box flex">
            <li class="tab-select">
                <div>全部</div>
                <div class="bottom-line"></div>
                <span class="tab-down"></span>
            </li>
            <li>
                <div>预约服务</div>
                <div class="bottom-line"></div>
                <span class="tab-down display"></span>
            </li>
            <li>
                <div>办事服务</div>
                <div class="bottom-line"></div>
                <span class="tab-down display"></span>
            </li>
            <li>
                <div>教育服务</div>
                <div class="bottom-line"></div>
                <span class="tab-down display"></span>
            </li>
            <li>
                <div>查询服务</div>
                <div class="bottom-line"></div>
                <span class="tab-down display"></span>
            </li>
            <li>
                <div>便民服务</div>
                <div class="bottom-line"></div>
                <span class="tab-down display"></span>
            </li>
        </ul>
    </div>


    <div class="box flex just-center box">
        <!-- 列表 -->
        <div class="content-left">
            <ul class="content-box">
                <div class="flex" style="border-bottom: 1px solid #e5e5e5; padding-bottom: 10px;">
                    <div class="screen flex align-center cursor"> <span class="s-type">分类筛选</span>  <span class="s-down"></span>
                        <ul class="screen-box display">
                            <li>全部</li>
                            <li>办事预约</li>
                            <li>疫苗预约</li>
                            <li>景点预约</li>
                        </ul>
                    </div>
                </div>
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><div class="yu-yue">办事预约</div> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">2021深圳护照网上预约操作步骤详解</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><div class="yu-yue">疫苗预约</div>  出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">2021深圳护照网上预约操作步骤详解</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><div class="yu-yue">景点预约</div>  出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">2021深圳护照网上预约操作步骤详解</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
                <!-- 查看更多 -->
                <div class=" flex just-center align-center">
                    <div class="li-btn more-li" style="margin-bottom: 50px; width: 100px; padding-left: 10px;padding-right: 0;">
                        <div href="#">查看更多》</div>
                    </div>
                </div>
                <!-- /查看更多 -->
            </ul>
            <ul class="content-box display">
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/banshiyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">九价宫颈癌疫苗</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/yimiaoyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">九价宫颈癌疫苗</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/jingdianyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">九价宫颈癌疫苗</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
                <!-- 查看更多 -->
                <div class=" flex just-center align-center">
                    <div class="li-btn more-li" style="margin-bottom: 50px; width: 100px; padding-left: 10px;padding-right: 0;">
                        <div href="#">查看更多》</div>
                    </div>
                </div>
                <!-- /查看更多 -->
            </ul>
            <ul class="content-box display">
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/banshiyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">深圳当代艺术与城市规划馆</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/yimiaoyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">深圳当代艺术与城市规划馆</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/jingdianyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">深圳当代艺术与城市规划馆</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
            </ul>
            <ul class="content-box display">
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/banshiyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">出入境预约</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/yimiaoyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">出入境预约</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/jingdianyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">出入境预约</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
            </ul>
            <ul class="content-box display">
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/banshiyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">2021深圳护照网上预约操作步骤详解</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/yimiaoyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">2021深圳护照网上预约操作步骤详解</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/jingdianyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">2021深圳护照网上预约操作步骤详解</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
            </ul>
            <ul class="content-box display">
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/banshiyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">2021深圳护照网上预约操作步骤详解</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/yimiaoyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">2021深圳护照网上预约操作步骤详解</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
                <li class="c-item flex between align-center">
                    <div>
                        <div class="c-title flex "><img src="./resource/images/search/jingdianyy.png" alt=""> 出入境预约</div>
                        <div class="c-desc">
                            办事指南：<a href="#">2021深圳护照网上预约操作步骤详解</a>
                        </div>
                    </div>
                    <div class="li-btn">
                        <a href="#">立即办理</a>
                    </div>
                </li>
            </ul>
        </div>
        <!-- /列表 -->

        <!-- 右部导航 -->
        <div class="content-right">
            <!-- 热搜资讯 -->
            <div class="hot-zixun">
                <div class="hot-title flex align-center"><span></span> 热搜资讯</div>
                <ul>
                    <li class="act-list flex">
                        <div class="num">1</div>
                        <div class="acticle">
                            <a href="#">城乡居民基本医疗保险缴费城乡居民基本医疗保险缴费</a> </div>
                    </li>
                    <li class="act-list flex">
                        <div class="num">2</div>
                        <div class="acticle"><a href="#">城乡居民基本医疗保险缴费</a></div>
                    </li>
                    <li class="act-list flex">
                        <div class="num">3</div>
                        <div class="acticle"><a href="#">城乡居民基本医疗保险缴费</a></div>
                    </li>
                    <li class="act-list flex">
                        <div class="num">4</div>
                        <div class="acticle"><a href="#">城乡居民基本医疗保险缴费</a></div>
                    </li>
                    <li class="act-list flex">
                        <div class="num">5</div>
                        <div class="acticle"><a href="#">城乡居民基本医疗保险缴费</a></div>
                    </li>
                </ul>
            </div>
            <!-- /热搜资讯 -->

            <!-- 最近搜索记录 -->
            <div class="recent-sch">
                <div class="sch-title flex align-center"><span></span> 最近搜索记录</div>
                <ul class="record">
                </ul>
                <div class="clean cursor"><img src="./resource/images/search/ljtong.svg" alt="">清除所有搜索记录</div>
            </div>
            <!-- /最近搜索记录 -->
        </div>
        <!-- /右部导航 -->


    </div>
    <!-- 底部 -->
    <footer>
        <div class=" footer-box container flex">
            <div class="mail">
                <h3>合作邮箱
                </h3>
                <h3 style="font-size: 20px;">
                    jiameng@bendibao.com
                </h3>
                <p>坚持真实的力量最大，优先承接本地生活服务类广告，坚决杜绝虚假夸张，欺蒙用户的广告宣传。</p>
            </div>
            <div>
                <h3>网站介绍
                </h3>
                <p>
                    本地宝城市生活服务是集预约服务、办事服务、教育服务、查询服务等多种服务为一体的在线服务平台。微信搜索并关注“深圳本地宝”公众号，回复“入户”、“社保” “公租房”“居住证”等关键词，您可以查看深圳相关办事的办理指南、办理条件、办理流程、办理地址等信息；回复“活动”、“旅游”、“进出深”等关键词，就能查询深圳本地最新活动、本地最新展会、节假日游玩、旅游地点游玩等信息。
                </p>
            </div>
            <div>
                <h3>诚聘英才
                </h3>
                <h3 style="font-size: 20px;">网站编辑/销售经理/PHP开发工程师
                </h3>
                <p>本地宝拥有强大的互联网运营团队、技术研发中心、市场营销团队，拥有自主知识产权，有意者请投递简历：guoxx@bendibao.com</p>
            </div>

        </div>
        <div class="footer-box container flex">
            <div>
                <h3>联系我们
                </h3>
                <h3 style="font-size: 20px;">0755-82180123
                </h3>
                <p>您可以咨询、建议、投诉</p>
            </div>

            <div>
                <h3 class="link flex just-center">
                    <div class="qr-code display">
                        <img src="http://imgbdb3.bendibao.com/weixinbdb/20169/5/201695202114686.jpg" alt="">
                        <span>
                      </span>
                    </div>
                    <img class="wx-bdb" src="./resource/images/wxgzh.png" alt="">
                    <span>本地宝微公众号</span>
                    <div class="shipin display">
                        <img src="./resource/images/douyin.svg" alt="">
                        <span>
                    </span>
                    </div>
                    <img class="dy-bdb" src="./resource/images/douyin.svg" alt="">
                    <span>本地宝抖音号</span>
                </h3>
                <h3 class="link flex just-center">
                    <div class="qr-code display">
                        <img src="./resource/images/bdb-app.png" alt="">
                        <span>
                  </span>
                    </div>
                    <img class="bdb-app" src="./resource/images/bdb.png" alt="">
                    <span>本地宝APP</span>
                    <div class="shipin display">
                        <img src="./resource/images/shexiang.svg" alt="">
                        <span>
                    </span>
                    </div>
                    <img class="sp-bdb" src="./resource/images/shexiang.svg" alt="">
                    <span>本地宝深圳视频号</span>
                </h3>

            </div>

            <div>
                <h3>企业文化</h3>
                <h3>让人性之光照亮生活</h3>
                <p>本地宝价值观：敬天爱人</p>
            </div>
        </div>
    </footer>
    <!-- /底部 -->
    <script src="./src/js/jq.min.js"></script>
    <script src="./src/js/footer.js"></script>
    <script src="./src/js/search.js"></script>
</body>

</html>

</html>